import React, { useState, useEffect } from "react";
import { Form, Input, Button, message } from "antd";
import TextArea from "antd/lib/input/TextArea";
import { SettingApi } from "@/api/setting";

interface IProps {
  settings: any;
}
const SEOSetting: React.FC<IProps> = ({ settings }) => {
  const [seoKeyword, setSeoKeyword] = useState(null);
  const [seoDesc, setSeoDesc] = useState(null);
  useEffect(() => {
    setSeoKeyword(settings?.seoKeyword || null)
    setSeoDesc(settings?.seoDesc || null)
  }, [settings])
  const save = () => {
    SettingApi.updateSettings({ seoKeyword, seoDesc }).then(res => {
      message.success("保存成功")
    })
  }
  return (
    <Form>
      <Form.Item label="关键词">
        <Input value={seoKeyword} onChange={e => setSeoKeyword(e.target.value)} />
      </Form.Item>
      <Form.Item label="描述信息">
        <TextArea value={seoDesc} onChange={e => setSeoDesc(e.target.value)} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={save}>保存</Button>
      </Form.Item>
    </Form>
  );
};

export default SEOSetting;
